<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯js带弹性动画的手风琴图片相册特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		html {
			overflow: hidden;
		}
		body {
			position: absolute;
			margin: 0px;
			padding: 0px;
			background: #111;
			width: 100%;
			height: 100%;
		}
		#center {
			position: absolute;
			left: 50%;
			top:  50%;
		}
		#slider {
			position: absolute;
			width: 820px;
			height: 333px;
			left: -430px;
			top: -186px;
			overflow: hidden;
			background: #000;
			border: 20px solid #000;
		}
		#slider .slide {
			position: absolute;
			top: 0px;
			height: 333px;
			width: 500px;
			background: #000;
			overflow: hidden;
			border-left: #000 solid 1px;
			cursor: default;
		}
		#slider .title   {
			color: #F80;
			font-weight: bold;
			font-size: 1.2em;
			margin-right: 1.5em;
			text-decoration: none;
		}
		#slider .backgroundText {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 100%;
			background: #000;
			filter: alpha(opacity=40);
			opacity: 0.4;
		}
		#slider .text {
			position: absolute;
			top: 1%;
			top: 100%;
			color: #FFF;
			font-family: verdana, arial, Helvetica, sans-serif;
			font-size: 0.9em;
			text-align: justify;
			width: 470px;
			left: 10px;
		}
		#slider .diapo {
			position: absolute;
			filter: alpha(opacity=100);
			opacity: 1;
			visibility: hidden;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>纯js带弹性动画的手风琴图片相册特效</h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Accordion/201612074245.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="htmleaf-content">
			<p align="center"></p>
			<p align="center"></p>
			<p align="center"></p>
			<div id="center">
				<div id="slider">
					<div class="slide">
						<img class="diapo" src="images/sf10.jpg" alt="">
						<div class="text">
							  <span class="title">The best</span>
							  The offspring of a customized orbiter, Ostem arose as the best balanced
							  home for our plans. So we submitted to its conditions.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf14.jpg" alt="">
						<div class="text">
							<span class="title">Prototype</span>
							Ostem's deep impulse flow is selectively regulated by a molecule
							originated in the prototype model, that creates its own variational
							principles, as oriented by the first local generation of terminable androids.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf24.jpg" alt="">
						<div class="text">
							  <span class="title">Has been reduced</span>
							  Paired hosts come out nicely after only two cycles now. Their size has been
							  reduced to a half the original as planned, and indeed they show an
							  evolutionary advantage in the process of fixing self-generated instructions.
							  Plus, they are beautiful.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf04.jpg" alt="">
						<div class="text">
							<span class="title">By close-alikes</span>
							Now I have regained hopes in someday finding myself surrounded by
							close-alikes to us. However, they will not be audible, at least not in my
							life span. We resolved the low freq vibration a superior solution for our
							communicational goals ...
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf01.jpg" alt="">
						<div class="text">
							  <span class="title">To bear</span>
							  We did not expect their surface to produce such a carbon powder coat, though
							  this is the best model so far. I shall have to bear with the inconveniences.
							  They seem to establish a parallel communication through that carbon coat and
							  I find myself unable to decodify the signal into anything meaningful.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf15.jpg" alt="">
						<div class="text">
							  <span class="title">The zero level</span>
							  Today a set of vibration came up from the zero level;  we expect to launch
							  the transitional program in no longer than five basetime units. Psykesoma?				  
							  galore and we'll betray our very nature into infinite, unending 2D surfaces.
							  We do need that vibration, and we will conquer its source.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf41.jpg" alt="">
						<div class="text">
							  <span class="title">Beautifully</span>
							  To keep my sanity I wear the tactile sensors all the time. They translate
							  beautifully; I can even see distances while still on Psykesoma. This was
							  quite a discovery. We have grown more adaptable than expected.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf26.jpg" alt="">
						<div class="text">
							  <span class="title">Uneasy to match</span>
							  Yewoona had to travel farther and longer than I did. Her base orbiter was
							  set to keep a complex combinational path that made it uneasy to match our
							  circuits. But her nature showed stronger than programmed.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf50.jpg" alt="">
						<div class="text">
							  <span class="title">Adapted to serve</span>
							  Keep feeding them. We will never be this lucky again; an autogenerated
							  species adapted to serve all our needs!
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf19.jpg" alt="">
						<div class="text">
							  <a class="title" href="http://www.dhteumeuleu.com">At soonest</a>
							  "Blood is dark red, iron dark blue, this tale is blissful and so are you". I
							  should get to the hotel at soonest. The agency guy must be there already,
							  with some luck we'll have some nice dinner on him. How's that?
						</div>
					</div>
				</div>
			   
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="js/slider.js"></script>
	<script type="text/javascript">
	/* ==== start script ==== */
	slider.init();
	</script>
</body>
</html>